<template>
  <el-card class="overview-container">
    <div class="header">
      <div class="title">{{ t("home.overview.title") }}</div>
      <div class="time-filters">
        <el-radio-group v-model="activeTimeFilter" @change="changeTimeFilter">
          <el-radio-button label="week">{{
            t("home.overview.timeFilters.week")
          }}</el-radio-button>
          <el-radio-button label="month">{{
            t("home.overview.timeFilters.month")
          }}</el-radio-button>
          <el-radio-button label="quarter">{{
            t("home.overview.timeFilters.quarter")
          }}</el-radio-button>
          <el-radio-button label="total">{{
            t("home.overview.timeFilters.total")
          }}</el-radio-button>
        </el-radio-group>
      </div>
    </div>

    <div class="statistics-cards">
      <!-- 服务用户数卡片 -->
      <div class="stat-card">
        <h3>{{ t("home.overview.statistics.serviceUsers") }}</h3>
        <div class="number">{{ summaryData.totalServiceCount || 0 }}</div>
        <div class="detail">
          <span
            >{{ t("home.overview.details.executive") }}：{{
              summaryData.executiveUserCount || 0
            }}{{ t("home.overview.details.people") }}</span
          >
          <span
            >{{ t("home.overview.details.family") }}：{{
              summaryData.familyUserCount || 0
            }}{{ t("home.overview.details.people") }}</span
          >
        </div>
      </div>

      <!-- 处理文档数卡片 -->
      <div class="stat-card">
        <h3>{{ t("home.overview.statistics.processedDocuments") }}</h3>
        <div class="number">
          {{ summaryData.reportAndArchiveCount || 0 }}
        </div>
        <div class="detail">
          <span
            >{{ t("home.overview.details.archive") }}：{{
              summaryData.archiveCount || 0
            }}</span
          >
          <span
            >{{ t("home.overview.details.report") }}：{{
              summaryData.reportCount || 0
            }}</span
          >
        </div>
      </div>

      <!-- 处理任务数卡片 -->
      <div class="stat-card">
        <h3>{{ t("home.overview.statistics.processedTasks") }}</h3>
        <div class="number">{{ summaryData.taskCount || 0 }}</div>
        <div class="detail">
          <span
            >{{ t("home.overview.details.followUp") }}：{{
              summaryData.followUpCount || 0
            }}</span
          >
          <span
            >{{ t("home.overview.details.healthCheck") }}：{{
              summaryData.healthCheckCount || 0
            }}</span
          >
          <span
            >{{ t("home.overview.details.vaccine") }}：{{
              summaryData.vaccineCount || 0
            }}</span
          >
        </div>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import type { HomeSummaryVO } from "@/api/home1";
import { homeApi } from "@/api/home1";
import dayjs from "dayjs";
import { onMounted, ref } from "vue";
import { useI18n } from "vue-i18n";

// 国际化
const { t } = useI18n();

// 数据接口
const summaryData = ref<HomeSummaryVO>({
  totalServiceCount: 0,
  executiveUserCount: 0,
  familyUserCount: 0,
  reportAndArchiveCount: 0,
  archiveCount: 0,
  reportCount: 0,
  taskCount: 0,
  followUpCount: 0,
  healthCheckCount: 0,
  vaccineCount: 0
});

const activeTimeFilter = ref("total"); // 默认选中"过去一个月"

// 获取时间范围
const getTimeRange = (type: string) => {
  // 如果是累计，返回 null 表示不传时间参数
  if (type === "total") {
    return null;
  }
  // 结束时间设置为今天结束时刻的毫秒时间戳
  const endDate = dayjs().endOf("day").valueOf().toString();
  let startDate = "";

  // 根据类型计算开始时间的毫秒时间戳
  switch (type) {
    case "week":
      startDate = dayjs()
        .subtract(1, "week")
        .startOf("day")
        .valueOf()
        .toString();
      break;
    case "month":
      startDate = dayjs()
        .subtract(1, "month")
        .startOf("day")
        .valueOf()
        .toString();
      break;
    case "quarter":
      startDate = dayjs()
        .subtract(3, "month")
        .startOf("day")
        .valueOf()
        .toString();
      break;
    default:
      startDate = dayjs()
        .subtract(1, "month")
        .startOf("day")
        .valueOf()
        .toString();
  }

  // dayjs的valueOf()方法已经返回毫秒级时间戳，不需要额外处理
  return { startDate, endDate };
};

// 获取数据
const fetchSummaryData = async (type: string) => {
  try {
    const timeRange = getTimeRange(type);
    let params;

    // 如果是累计，不传时间参数
    if (timeRange === null) {
      params = {};
    } else {
      params = {
        endDate: +timeRange.endDate,
        startDate: +timeRange.startDate
      };
    }
    const { data } = await homeApi.getHomesummaryData(params);
    summaryData.value = data;
  } catch (error) {
    console.error("获取概览数据失败：", error);
  }
};

// 切换时间过滤器
const changeTimeFilter = (type: string) => {
  activeTimeFilter.value = type;
  fetchSummaryData(type);
};

// 组件挂载时获取数据
onMounted(() => {
  fetchSummaryData(activeTimeFilter.value);
});
</script>

<style lang="scss" scoped>
.overview-container {
  border-radius: 16px !important;
  margin-bottom: 16px;

  :deep(.el-card__body) {
    padding: 16px 0;
  }

  .header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 16px;

    .title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      position: relative;
      padding-left: 12px;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background: linear-gradient(270deg, #61fffb 0%, #65c8ff 100%);
        box-shadow: 0px 2px 16px 0px rgba(41, 127, 128, 0.06);
        border-radius: 2px;
      }
    }

    .time-filters {
      margin-left: 32px;

      :deep(.el-radio-group) {
        .el-radio-button {
          margin-right: 0;
          height: 32px;

          &:first-child {
            .el-radio-button__inner {
              border-radius: 6px 0 0 6px;
            }
          }

          &:last-child {
            .el-radio-button__inner {
              border-radius: 0 6px 6px 0;
            }
          }

          .el-radio-button__inner {
            height: 32px;
            line-height: 32px;
            padding: 0 16px;
            border: 1px solid var(--el-border-color);
            background-color: var(--el-fill-color-blank);
            color: var(--el-text-color-regular);
            font-size: 14px;
            transition: all 0.3s;

            &:hover {
              color: var(--el-color-primary);
            }
          }

          &.is-active {
            .el-radio-button__inner {
              color: var(--el-color-primary);
              background-color: var(--el-color-primary-light-9);
              border-color: var(--el-color-primary);
              box-shadow: -1px 0 0 0 var(--el-color-primary);
            }
          }
        }
      }
    }
  }

  .statistics-cards {
    display: flex;
    gap: 16px;
    padding: 0 16px;

    .stat-card {
      flex: 1;
      height: 128px;
      padding: 16px 20px;
      background: linear-gradient(90deg, #e5f8fb 0%, #ffffff 100%);
      border-radius: 16px;
      box-shadow: 0px 2px 16px 0px rgba(41, 127, 128, 0.06);
      position: relative;
      overflow: hidden;

      /* 使用伪元素绘制渐变圆角边框，确保四角为圆弧 */
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 16px;
        padding: 1px;
        background: linear-gradient(
          270deg,
          rgba(255, 255, 255, 1),
          rgba(112, 255, 243, 1)
        );
        -webkit-mask:
          linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        mask:
          linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
      }

      h3 {
        color: #222222;
        font-size: 14px;
        margin: 0 0 6px 0;
        font-weight: bold;
      }

      .number {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        margin-bottom: 6px;
      }

      .detail {
        color: #222222;
        font-size: 14px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;

        span {
          position: relative;
          padding-right: 8px;

          &:not(:last-child)::after {
            content: "";
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1px;
            height: 12px;
            background: #222222;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.el-radio-button.is-active
  .el-radio-button__original-radio:not(:disabled)
  + .el-radio-button__inner,
.overview-container
  .header
  .time-filters[data-v-e8b5d530]
  .el-radio-group
  .el-radio-button.is-active
  .el-radio-button__inner {
  box-shadow: none;
}
</style>
